<!--
 * @Author: your name
 * @Date: 2022-01-13 16:05:04
 * @LastEditTime: 2022-01-18 19:52:43
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \star-cat-h5\src\views\artist\index.vue
-->
<template>
  <div class="artist">
    <van-sticky>
      <van-search
        v-model="value"
        placeholder="艺人姓名/昵称/ID"
        v-show="activeName == 'list'"
        input-align="center"
        @input="search"
    /></van-sticky>
      <!-- :sticky="activeName != 'list'" -->
    <van-tabs
      v-model="activeName"
      @click="onClick"
      color="#68a0fc"
      line-width="60px"
      swipeable
      animated
    >
      <van-tab title="艺人列表" name="list">
        <list :searchValue="searchValue"></list>
      </van-tab>
      <van-tab title="审核列表" name="examine_list">
        <examine-list></examine-list>
      </van-tab>
    </van-tabs>
    <IphoneBottomview v-show="activeName == 'list'">
      <div class="add_new_data_box bottom-box_shadow" @click="addartist">
        <van-icon name="add-o" color="#4C90FB" /><span>新建艺人</span>
      </div>
    </IphoneBottomview>
  </div>
</template>

<script>
import { Search, Tab, Tabs } from "vant";
import IphoneBottomview from "./components/IphoneBottomview.vue";
export default {
  components: {
    Search,
    Tab,
    Tabs,
    List: (res) => require(["./List.vue"], res),
    ExamineList: (res) => require(["./ExamineList.vue"], res),
    IphoneBottomview,
  },
  data() {
    return {
      value: "",
      searchValue: "",
      activeName: "list",
      tabData: [
        { title: "艺人列表", name: "list" },
        { title: "艺人列表", name: "examine-list" },
      ],
    };
  },
  created() {
    this.infoActiveName();
  },
  methods: {
    infoActiveName() {
      this.activeName = this.$route.query.type || "list";
    },
    // 输入事件
    search() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.searchValue = this.value;
      }, 1000);
    },
    // tab切换事件
    onClick(name) {
      let query = this.$route.query;
      this.$router.replace({
        query: { ...query, type: name, time: +new Date() },
      });
    },
    addartist() {
      let infoData = {
        name: "", //姓名
        card_num: "", //身份证号
        card_url: "", //身份证url地址
        anchor: [
          {
            id: "", //主键
            anchor_num: "", //主播id
            platforms_id: "", //平台id
            platforms_name: "", //平台name
            is_main: true, //是否是主键1是 2否
          },
        ],
        wechat: "", //微信号
        mobile: "", //手机号
        star_scout: "", //星探
        star_scout_name: "",
        agent: "", //经纪人
        agent_name: "",
        remarks: "", //艺人备注 不超过300位
        commercial_label: "",
        content_label: "",
      };
      this.$store.dispatch("artist/setCurrent", 0);
      this.$store.dispatch("artist/setData", infoData);
      this.$router.push("/artist_add");
    },
  },
  beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false
    next()
  }
};
</script>

<style scoped>
.add_new_data_box {
  height: 44px;
  position: fixed;
  bottom: 0;
}
</style>